<!DOCTYPE html>
<html>

<head> 
  <meta charset="utf-8"> 
  <title>菜鸟教程(runoob.com)</title> 
</head>

<body>
  <canvas id="tutorial" width="600" height="600" style="border:1px solid black;"></canvas>
  <script>
    var ctx;
    function draw() {
      var canvas = document.getElementById('tutorial');
      if (!canvas.getContext) return;
      var ctx = canvas.getContext("2d");
      // ctx.save(); //保存坐原点平移之前的状态
      ctx.translate(100, 100);
      ctx.strokeRect(0, 0, 100, 100)
      // ctx.restore(); //恢复到最初状态
      ctx.translate(200, 220);
      ctx.fillRect(0, 0, 100, 100)
    }
    draw();
  </script>

</body>

</html>
